<template>
  <div>
    <div class="container">
      <div class="list">
        <li v-for="(item, index) in list" :key="index" @click="goPage(item)">
          {{ item.COMP_NAME }} <font>{{ item.RECORD_DATE }}</font>
        </li>
      </div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { recordDetail, rightbottom } from "~/plugins/ajax";

export default {
  layout: "default",
  data() {
    return {
      title: "Hello World!",
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
      },
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: "My custom description",
        },
      ],
    };
  },
  async asyncData({ app }) {
    const params = {
      current: 1,
      size: 3,
      latestDays: 0,
      uid: null,
      corpType: "1",
    };

    let [info, res] = await Promise.all([
	          rightbottom(app, {}),
	          recordDetail(app, params)
         ])

    console.log("我是方法一res", info);
  
    console.log("我是方法二res", res);

    // const res = await recordDetail(app, params);

    let obj = {};
    if (res && res.code === 200) {
      obj = {
        list: res.data.records,
        pagination: {
          total: res.data.total,
          currentPage: res.data.current,
          pageSize: res.data.size,
        },
      };
    }
    
    return obj;
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.currentPage = val;
      this.getList();
    },
    async getList() {
      const params = {
        current: this.pagination.currentPage,
        size: this.pagination.pageSize,
        latestDays: 0,
        uid: null,
        corpType: "1",
      };

      const res = await recordDetail(this, params);

      // const res = await axios.post(
      //   const res = await this.$axios.$post(
      //   "https://trail.anning.city/bigdataapi/actual/recordDetail",
      //   params
      // );
      // const res = await this.$axios.$post(
      //   "https://trail.anning.city/bigdataapi/actual/recordDetail",
      //   params
      // );
      let obj = {};
      if (res && res.code === 200) {
        this.list = res.data.records;
        this.pagination.total = res.data.total;
        this.pagination.currentPage = res.data.current;
        this.pagination.pageSize = res.data.size;
      }
      console.log(res);
    },
    goPage(item){
      // this.$router.push({ path: '/show' + (_idl || 'new')})
      this.$router.push({ name: 'show',params:item})
    }
  },
};
</script>

<style>
.list {
  width: 100%;
}
.list li {
  line-height: 80px;
  list-style: none;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.list li:hover{
  background-color: #f0f0f0;
}
.list li font {
  float: right;
  color: #ccc;
}
</style>
